<template>
  <div>
    <el-container>
      <el-header class="header">
        <!-- 头部 -->
        <el-row class="topRow">
          <el-col :span="2" class="imgCol">
            <img id="topLogo" src="../../assets/客服.png" alt="logo" />
          </el-col>
          <el-col :span="2" :offset="15" class="lh-common">
            <span @click="toShouye" style="color: aliceblue;">返回首页</span>
          </el-col>
          <el-col class="lh-common" :offset="1" :span="2" style="color: white">欢迎您:{{userName}}</el-col>
          <el-col class="lh-common" :span="2" :offset="0">
            <el-link
              ref="btnExit"
              icon="el-icon-upload2"
              style="color: white"
              :underline="false"
              @mouseenter.native="btnChangeColor()"
              @click="exit"
            >退出登录</el-link>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 700px;">
          <!-- 左侧导航 -->
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>-->
          <el-row>
            <el-col>
              <el-button @click="collapseOrUnfold">
                <i class="el-icon-menu" style="font-size: 23px"></i>
              </el-button>
            </el-col>
          </el-row>
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            background-color="#17324c"
            text-color="#fff"
            router
          >
            <el-submenu :index="menu.id + ''" v-for="menu in menuList" :key="menu.id">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item
                :index="childrenMenu.link"
                v-for="childrenMenu in menu.children"
                :key="childrenMenu.id"
              >{{ childrenMenu.name }}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  created() {
    this.selMenu();
    this.nameByLogin();
  },
  data() {
    return {
      isCollapse: false,
      menuList: [],
      userName:"",
    };
  },
  methods: {
    nameByLogin(){
    this.$axios.get('api/uums-server/nameByLogin').then(res=>{
      console.log(res.data.data);
      if(res.data.code==200){
        this.userName=res.data.data;
      }
    })
  },
    toShouye(){
      this.$router.push({path:"/"})
    },
    exit() {
      localStorage.removeItem("token");
      this.$router.push({ path: "/login" });
    },
    selMenu() {
      this.$axios.get("api/uums-server/selMenu").then((response) => {
        // console.log(response.data);
        if (response.data.code == 200) {
          this.menuList = response.data.data;
        }
      });
    },
    collapseOrUnfold() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    btnChangeColor() {
      //   this.$refs.btnExit.style.color = "red";
      //   console.log(this.$refs.btnExit)
      //   console.log("111111");
    },
  },
};
</script>

<style scoped>
.imgCol {
  line-height: 164px;
}
.el-aside {
  margin-top: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}
#topLogo {
  width: 90px;
  /* line-height: 90px; */
}
.el-header {
  height: 92px !important;
  background-color: #17324c;
}
.topRow {
  height: 92px;
}
.lh-common {
  line-height: 92px;
}

/* ###########  element ui ###################  */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
